<template>
<div class="flexX" v-loading="loading">
  <div class="detailPageContainer">
    <el-page-header @back="goBack" style="margin-left: 50px;">
      <template #content>
        <span class="text-large font-600 mr-3"> {{book.name}} </span>
      </template>
    </el-page-header>
    <el-divider/>
    <el-container>
      <el-aside width="400px">
        <div class="flexX" style="width: 100%">
          <img :src="imgUrl" style="width: 100%;height: 100%;" alt=""/>
        </div>
      </el-aside>
      <el-main>
        <div class="mainContent">
          <h1>{{book.name}}</h1>
          <p style="margin-top: 10px;font-size: 18px;font-weight: 600">价格：
            <span style="color: #a90303;font-size: 30px">${{book.price}}</span>
          </p>
          <p style="margin-top: 10px;font-size: 15px">类型：{{book.type}}</p>
          <p style="margin-top: 10px;font-size: 15px">出版社：{{book.press}}</p>
          <el-button size="large" color="#a90303" style="margin-top: 50px"
            @click="gotoPurchase">立即购买</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</div>
</template>

<script setup>
import {onBeforeMount, onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import axios from "axios";
import router from "@/router";
import store from "@/store";
const route = useRoute();

const bookId = ref()
const imgUrl = ref()
const book = ref({})
const loading = ref(true)

const goBack = () => {
  router.push('/main')
}
const gotoPurchase = ()=>{
  router.push('/purchase')
}
onMounted(() => {
  window.scrollBy(0,0);
  bookId.value = route.query.id
  axios.get(`/api/book/getBookById/${bookId.value}`)
      .then(res => {
        book.value = res.data[0]
        store.state.book = res.data[0]
        imgUrl.value = require(`@/assets/${bookId.value}.jpg`);
      })
      .finally(() => {
        loading.value = false;

      })
})

</script>

<style scoped>
.detailPageContainer{
  width: var(--content);
  height: 900px;
  background-color: white;
}
.mainContent{
  padding-top: 50px;
}
</style>